<template>
  <div>
    <div id="container" style="width:70%;height: 400px"/>
<!--    <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--      <el-form-item label="请输入上车地点" >-->
<!--        <el-input v-model="form.pickupLocation" placeholder="请输入上车地点" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="请输入目的地" >-->
<!--        <el-input v-model="form.destination" @blur="goView" placeholder="请输入目的地" />-->
<!--      </el-form-item>-->
    起始位置：<el-input id="start" v-model="pickupLocation"></el-input>
    结束位置：<el-input id="end" v-model="destination" @blur="goView" ></el-input>
      <el-checkbox-group v-model="checkList" @change="getCheck">
        <el-checkbox label="2">新能源型</el-checkbox>
        <el-checkbox  label="3">舒適性</el-checkbox>
        <el-checkbox  label="4">豪华型</el-checkbox>
        <el-checkbox  label="5">商務行</el-checkbox>
      </el-checkbox-group>
    <el-button type="primary" @click="addhujiao">确认呼叫</el-button>


  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { addOrder,getCarType } from "@/api/system/passenger";
export default {
  name: 'AMapView',
  data() {
    return {
      map: null,
      pickupLocation: '',
      destination: '',
      checkList: [],
      form: {},
    }
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: 'e94e0e0afa1842f9327e06ca955297a7' // 申请key对应的秘钥
    }
    // DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    getCheck(){

      let ll=this.checkList.join(",")
      console.log("vbjvbfv"+ll)
    },
    goView() {
      // eslint-disable-next-line no-undef
      const driving = new AMap.Driving({
        map: this.map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        // eslint-disable-next-line no-undef
        policy: AMap.DrivingPolicy.LEAST_TIME
      })
      const points = [
        { keyword: this.pickupLocation, city: '北京' },
        { keyword: this.destination, city: '北京' }
      ]
      driving.search(points, (status, result) => {
        // 未出错时，result即是对应的路线规划方案
        console.log('status=', status)
        console.log('result=', result)
      })
     this.getPrice();
    },

    initMap() {
      AMapLoader.load({
        key: 'd0a13e507309316024509a088bf8cfee', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(AMap => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 5, // 初始化地图级别
          center: [116.298726, 40.0413] // 初始化地图中心点位置
        })
        const autoOptions = {
          // city 限定城市，默认全国
          city: '北京',
          input: 'start'
        }
        // 实例化AutoComplete
        const autoComplete = new AMap.AutoComplete(autoOptions)
        const autoOptions2 = {
          // city 限定城市，默认全国
          city: '北京',
          input: 'end'
        }
        // 实例化AutoComplete
        const autoComplete2 = new AMap.AutoComplete(autoOptions2)
      }).catch(e => {
        console.log(e)
      })
    },
    addhujiao(){
      this.form.pickupLocation=this.pickupLocation;
      this.form.destination=this.destination;
      let carType=this.checkList.join(",")
      this.form.carType=carType;
      addOrder(this.form).then(response => {
        alert(response.msg)
        this.$router.push("/user/decail")
      })
    },
    getPrice(){
      getCarType(this.pickupLocation,this.destination).then(response=>{

      })
    },
  }
}
</script>
<style  scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>

